<template>
	<!-- 轮播图页 -->
	<view class="ImageDetail2">
		<view class="top-nav">
			<!-- <TopNav leftColor="#fff" /> -->
			<view class="back" @click="back()"><uni-icons type="back" size="60rpx" color="#fff"></uni-icons></view>
		</view>
		<view class="skeleton" v-if="loading">
			<u-skeleton
				rows="1"
				:loading="loading"
				:animate="true"
				:title="true"
				rowsHeight="80rpx"
				titleWidth="100%"
				titleHeight="70vh"
			></u-skeleton>
		</view>
		<swiper v-else class="swiper" :duration="duration" :current="activeIndex" @change="onChange">
			<swiper-item v-for="(item, index) in imgList" :key="item.id">
				<!-- activeIndex >= index - 1  v-if="activeIndex >= index - 1 && activeIndex - 1 <= index" -->
				<view class="swiper-item" v-if="activeIndex >= index - 1 && activeIndex - 1 <= index">
					<!-- 图片详情页 -->
					<ImageDetail
						:imgItem="item"
						:index="index"
						:active="activeIndex"
					/>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import api from '@/common/api.js';
import ImageDetail from '@/components/ImageDetail/ImageDetail.vue';
export default {
	name: 'ImageDetail2',
	components: {
		ImageDetail
	},
	data() {
		return {
			duration: 300,
			imgList: [],
			activeIndex: 0,
			newFolder: [],
			allFolder: [],
			loading: true,
			shareData: {},
			ishare: false,
		};
	},
	onLoad(option) {
		this.loading = true;
		// uni.showLoading({
		// 	title: '加载中'
		// });
		// uni.$on('handleImg', data => {
		// 	console.log('handleImg ==>', data);
		// 	this.imgUrl = data.imgData.url;
		// 	this.imgList = data.imgList;
		// 	console.log('this.imgList ==>', this.imgList);
		// 	this.activeIndex = option.active;
		// 	console.log('activeIndex2 ==>', this.activeIndex);
		// });

		/* 
			如果没用option.data就是从列表进来
			有option.data就是从分享链接进来
		 */
		if (!option.data) {
			// #ifdef APP-NVUE
			let eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
			let eventChannel = this.getOpenerEventChannel();
			// #endif
			eventChannel.on('handleImg', data => {
				// console.log('参数 ==>', data);
				this.ishare = false;
				this.shareData = data;
				this.imgList = data.imgList;
				// console.log('this.imgList ==>', this.imgList);
				this.activeIndex = option.active;
				// console.log('activeIndex2 ==>', this.activeIndex);
			});
			
			setTimeout(() => {
				// uni.hideLoading();
				this.loading = false;
			}, 500);
		} else {
			// console.log('onLoad ==>', JSON.parse(decodeURIComponent(option.data)));
			let data = JSON.parse(decodeURIComponent(option.data));
			this.ishare = true;
			this.shareData = data;
			this.imgList = [data.imgData];
			// console.log('this.imgList ==>', this.imgList);
			this.activeIndex = 0;
			// console.log('activeIndex2 ==>', this.activeIndex);
			let ajax = [this.getNewFolder(), this.getAllFolder()];
			Promise.all(ajax)
				.then(() => {
					uni.hideLoading();
					setTimeout(() => {
						this.loading = false;
					}, 500)
				})
				.catch(e => {
					uni.hideLoading();
					this.loading = false;
					console.log(e);
				});
		}

		
	},
	onReady() {
		// uni.getSystemInfo({
		// 	success: function (res) {
		// 		console.log(res.model);
		// 		console.log(res.pixelRatio);
		// 		console.log(res.windowWidth);
		// 		console.log(res.windowHeight);
		// 		console.log(res.language);
		// 		console.log(res.version);
		// 		console.log(res.platform);
		// 	}
		// });
	},
	onShareAppMessage(res) {
		// console.log('share2 ==>', res);
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '最全的APP截图收集站',
			path: `/components/ImageDetail2/ImageDetail2?data=${encodeURIComponent(
				JSON.stringify(this.shareData)
			)}`
		};
	},
	onUnload() {
		// console.log('onUnload');
		// if (this.ishare) {
		// 	uni.switchTab({
		// 		url: '../../pages/index/index'
		// 	});
		// }
	},
	computed: {
		isShow() {
			return function(index) {
				return this.activeIndex == index || this.activeIndex + 1 == index;
			};
		}
	},
	methods: {
		back() {
			if (this.ishare) {
				uni.switchTab({
					url: '../../pages/index/index'
				});
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},

		/* 切换监听 */
		onChange(e) {
			var index = e.detail.current;
			this.activeIndex = index;
			// console.log(this.activeIndex);
			// if (index == this.dataList.length - 3) {
			// 	console.log("add data");
			// 	// this.getList();
			// }
		},

		// 获取最新收藏夹
		async getNewFolder() {
			let tokenString = uni.getStorageSync('access_token');
			if (!tokenString) {
				return false;
			}
			try {
				let res = await this.$ajax.get({
					url: api.newest_favorites,
					header: {
						Authorization: 'Bearer ' + tokenString
					}
				});
				// console.log('最新收藏夹res ==>', res);
				let data = res.data.data;
				data.forEach(item => {
					if (item.cover_path) {
						item.cover_path = JSON.parse(item.cover_path);
					}
				});
				if (res.statusCode == 200) {
					this.$store.commit('getNewFolder', data || []);
				}
			} catch (e) {
				console.log(e);
			}
		},

		// 获取全部收藏夹
		async getAllFolder() {
			let tokenString = uni.getStorageSync('access_token');
			if (!tokenString) {
				return false;
			}
			try {
				let res = await this.$ajax.get({
					url: api.favoriteFolders,
					header: {
						Authorization: 'Bearer ' + tokenString
					}
				});
				// console.log('全部收藏夹res ==>', res);
				let data = res.data.data;
				data.forEach(item => {
					if (item.cover_path) {
						item.cover_path = JSON.parse(item.cover_path);
					}
				});
				if (res.statusCode == 200) {
					this.$store.commit('getAllFolder', data || []);
				}
			} catch (e) {
				console.log(e);
			}
		}
	}
};
</script>

<style lang="scss">
.ImageDetail2 {
	height: 100vh;
	.swiper {
		height: 100%;
	}
	.swiper-item {
		height: 100%;
		// overflow: auto;
	}
	.skeleton {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		// align-items: center;
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		z-index: 2;
		padding: 200rpx 32rpx 0;
		box-sizing: border-box;
	}
	.top-nav {
		position: fixed;
		// width: 100%;
		left: 32rpx;
		top: 76rpx;
		z-index: 999;
	}
}
</style>
